<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 指令是带有 'v-' 前缀的attribute -->
        <!-- 指令的职责是当表达式的值改变时,将值改变带来的影响响应的作用于DOM -->
        <p v-if="seen">你能看到我吗?</p>
        <!-- 1 参数 -->
        <!-- v-bind 指绑定 -->
        <a v-bind:href="url">点我跳转</a>
        <!-- v-on 用于监听事件 -->
        <a v-on:click="fn"></a>嗯嗯</a>
        <!-- 2 动态参数 -->
        <!-- 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的 -->
        <!-- 另外大写字母会被转换为小写如attributeName转换为attributename -->
        <div>
            <a v-bind:[attributename]="url">继续点我跳转</a>
            <a v-bind:[attributeName]="url">继续继续点我跳转</a>
        </div>
        <!-- 3 修饰符 -->
        <!-- 以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 -->
        <!-- 加上.stop告诉click2执行完就停止 -->
        <div v-on:Click='click1'>
            <div @Click.stop='click2'>
                点我
            </div>
        </div>
       
    </div>
    
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                seen:true,
                url: 'http://www.baidu.com',
                attributename: 'href'
            },
            methods:{
                click1: function(){
                    console.log('click1')
                },
                click2: function(){
                    console.log('click2')
                },
                fn: function(){
                    alert('你好!')
                }
            }
        });
        // vm.seen = false;
    
    </script>
</body>
</html>